<template>
  <div class="alumniCertificate">
    <div class="form_box">
      <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
      <u--form
        labelPosition="left"
        :model="model1"
        :rules="rules"
        ref="form1"
      >
        <div
          class="modele1"
          style="background: white; width: 100%; padding: 0px 10px"
        >
          <!-- 在校经历 -->
          <u-form-item
            label="在校经历 ："
            prop="userInfo.experience"
            borderBottom
            ref="item1"
            leftIcon="*"
            labelWidth="148px"
            :leftIconStyle="{ color: 'red' }"
            @click="showSex = true"
          >
            <u--input
              v-model="model1.userInfo.experience"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择在校经历"
              border="none"
            ></u--input>
            <u-icon
              slot="right"
              name="arrow-right"
            ></u-icon>
          </u-form-item>
          <!-- 离校/毕业年份 -->
          <u-form-item
            label="离校/毕业年份 ："
            prop="userInfo.leave"
            borderBottom
            ref="item1"
            leftIcon="*"
            labelWidth="42%"
            :leftIconStyle="{ color: 'red' }"
          >
            <u--input
              v-model="model1.userInfo.leave"
              border="none"
              placeholder="请输入高校/或者毕业年份"
            ></u--input>
          </u-form-item>
        </div>
        <div
          class="modele1"
          style="
            background: white;
            width: 100%;
            padding: 0px 10px;
            margin-top: 10px;
          "
        >
          <!-- 班级经历 -->
          <div class="cell1">
            <u--image
              :showLoading="true"
              :src="src"
              width="15px"
              height="22px"
            ></u--image>
            <u--text text="班级经历"></u--text>
          </div>
          <div>
            <!-- 在校班级 -->
            <u-form-item
              label="在校班级 ："
              prop="userInfo.class"
              borderBottom
              ref="item1"
              leftIcon="*"
              labelWidth="98px"
              :leftIconStyle="{ color: 'red' }"
            >
              <u--input
                v-model="model1.userInfo.class"
                border="none"
                placeholder="请输入在校班级"
              ></u--input>
            </u-form-item>
            <!-- 班主任/任课老师 -->
            <u-form-item
              label="班主任/任课老师 ："
              prop="userInfo.teacher"
              borderBottom
              ref="item1"
              leftIcon="*"
              labelWidth="42%"
              :leftIconStyle="{ color: 'red' }"
            >
              <u--input
                v-model="model1.userInfo.teacher"
                border="none"
                placeholder="请输入班主任/任课老师"
              ></u--input>
            </u-form-item>
          </div>
          <div
            v-for="item in model1.userInfo.moreData"
            :key="item.id"
            style="position: relative; padding-top: 10px"
          >
            <div
              class=""
              style="
                height: 10px;
                background: #eef2fb;
                position: absolute;
                top: -1px;
                left: -7px;
                width: 107%;
              "
            ></div>
            <!-- 在校班级 -->
            <u-form-item
              borderBottom
              ref="item1"
              labelWidth="42%"
            >
              <template slot="label">
                <div :style="{
                    marginLeft: '12px',
                    fontSize: '16px',
                  }">
                  在校班级 ：
                </div>
              </template>
              <u--input
                v-model="item.class"
                border="none"
                placeholder="请输入在校班级"
              ></u--input>
            </u-form-item>

            <!-- 班主任/任课老师 -->
            <u-form-item
              borderBottom
              ref="item1"
              labelWidth="42%"
            >
              <template slot="label">
                <div :style="{
                    marginLeft: '12px',
                    fontSize: '16px',
                  }">
                  班主任/任课老师 ：
                </div>
              </template>
              <u--input
                v-model="item.teacher"
                border="none"
                placeholder="请输入班主任/任课老师"
              ></u--input>
            </u-form-item>
          </div>
        </div>
        <div
          class="modele1"
          style="width: 100%; padding: 0px 10px; margin-top: 10px"
        >
          <button
            class="login_btn"
            type="default"
            @click="clickAdd"
            style="
              background: #fff;
              font-size: 14px;
              border-radius: 15px;
              border: none;
              color: #a0a29d;
              padding: 2px 0px;
            "
          >
            多个班级者点击继续添加
          </button>
          <button
            v-if="!studentId"
            class="login_btn"
            type="primary"
            @click="formSubmit"
            style="
              background: #1990ff;
              font-size: 18px;
              border-radius: 10px;
              margin-top: 100px;
            "
          >
            下一步
          </button>
          <button
            v-else
            class="login_btn"
            type="primary"
            @click="saveBtn"
            style="
              background: #1990ff;
              font-size: 18px;
              border-radius: 10px;
              margin-top: 100px;
            "
          >
            保存
          </button>
        </div>
      </u--form>
      <!-- 在校经历弹出框 -->
      <u-action-sheet
        :show="showSex"
        :actions="actions"
        title="请选择在校经历"
        @close="showSex = false"
        @select="sexSelect"
      >
      </u-action-sheet>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //在校经历选择框
      showSex: false,
      actions: [
        {
          name: "学生",
        },
        {
          name: "教职工",
        },
      ],
      src: require("@/static/index/shuxian.png"),
      model1: {
        userInfo: {
          experience: "", //在校经历
          entrance: "", //入学年份
          leave: "", //离校年份
          class: "",
          teacher: "",
          moreData: [],
        },
      },

      rules: {
        //表单校验
        "userInfo.experience": {
          type: "string",
          required: true,
          message: "请填写在校经历",
          trigger: ["blur", "change"],
        },
        "userInfo.entrance": {
          type: "string",
          required: true,
          message: "请填写入学年份",
          trigger: ["blur", "change"],
        },
        "userInfo.leave": {
          type: "string",
          required: true,
          message: "请填写离校年份",
          trigger: ["blur", "change"],
        },
        "userInfo.class": {
          type: "string",
          required: true,
          message: "请填写在校班级",
          trigger: ["blur", "change"],
        },
        "userInfo.teacher": {
          type: "string",
          required: true,
          message: "请填写班主任/任课老师",
          trigger: ["blur", "change"],
        },
      },
      //添加学籍的标识id
      studentId: '',
    };
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$children[0].setRules(this.rules);
    console.log(this, "aaa");
  },
  onLoad(option) { //option为object类型，会序列化上个页面传递的参数
    console.log(option.id, '认证页'); //打印出上个页面传递的参数。
    this.studentId = option.id
  },
  methods: {
    //在校经历选择框
    sexSelect(e) {
      this.model1.userInfo.experience = e.name;
      this.$refs.form1.validateField("userInfo.experience");
    },
    //点击添加
    clickAdd() {
      uni.showModal({
        title: "提示",
        content: "是否添加多个班级",
        success: (res) => {
          if (res.confirm) {
            console.log("用户点击确定");
            this.model1.userInfo.moreData.push({
              id: Date.now(),
              class: "",
              teacher: "",
            });
            console.log(this.model1.userInfo.moreData);
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    //表单下一步提交
    formSubmit() {
      let data = this.model1.userInfo;
      this.$children[0]
        .validate()
        .then((res) => {
          uni.showToast({
            title: "提交成功！",
            duration: 2000,
            success: () => {
              setTimeout(() => {
                console.log(data, res);
                uni.reLaunch({
                  url: `/pages/alumniCertificate/alumniCertificate2`,
                });
              }, 600);
            },
          });
        })
        .catch((errors) => {
          uni.$u.toast("请完成表单！");
          console.log(data, "没填写玩");
        });
    },
    //表单保存
    saveBtn() {
      let data = this.model1.userInfo;
      this.$children[0]
        .validate()
        .then((res) => {
          uni.showToast({
            title: "保存成功！",
            duration: 2000,
            success: () => {
              setTimeout(() => {
                console.log(data, res);
                uni.reLaunch({
                  url: `/pages/personal/personal`,
                });
              }, 600);
            },
          });
        })
        .catch((errors) => {
          uni.$u.toast("请完成表单！");
          console.log(data, "没填写玩");
        });
    }
  },
};
</script>
<style lang="scss" scoped>
.form_box {
  box-sizing: border-box;
  background: #eef2fb;
  .cell1 {
    padding: 10px 0px;
    display: flex;
    border-bottom: 1px solid #e8e9ea;
    box-sizing: border-box;
  }
  .cell_join {
    padding: 10px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding-right: 15px;
    align-items: center;
  }
}
</style>